<template>
  <div>
    <h1>{{ restaurant.name }}</h1>
    <img :src="getImgUrl(restaurant.image)" alt="餐厅图片" class="restaurant-image" />
    <p><strong>地址：</strong>{{ restaurant.address }}</p>
    <h2>菜品列表</h2>
    <ul class="dishes-list">
      <li v-for="dish in restaurant.dishes" :key="dish.name" class="dish-item">
        <div class="dish-container">
          <div class="dish-image">
            <img :src="getImgUrl(dish.image)" alt="菜品图片" class="dish-image-img" />
          </div>
          <div class="dish-details">
            <p class="dish-name">{{ dish.name }} <span class="dish-price">￥{{ dish.price }}</span></p>
          </div>
        </div>
      </li>
    </ul>
    <div class="rating-section">
      <h2>用户评分与评价</h2>
      <el-rate v-model="restaurant.rating" disabled class="inline-rate"></el-rate>
    </div>
    <el-divider class="compact-divider"></el-divider>
    <el-collapse class="compact-collapse">
      <el-collapse-item v-for="review in restaurant.reviews" :key="review.id" :title="review.user" class="compact-collapse-item">
        <p>{{ review.comment }}</p>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      restaurant: {}
    };
  },
  methods: {
    getImgUrl(path) {
      if (path.startsWith('http')) {
        return path;
      }
      return '/images/' + path;
    }
  },
  created() {
    // 模拟从服务器获取餐厅详情
    setTimeout(() => {
      const restaurants = [
        {
          id: 1,
          name: '餐厅A',
          address: '地址A',
          image: '1.jpg',
          rating: 4.5,
          dishes: [
            { name: '菜品1', price: 50, image: '6.jpg' },
            { name: '菜品2', price: 60, image: '7.jpg' }
          ],
          reviews: [
            { id: 1, user: '用户A', comment: '很好吃！' },
            { id: 2, user: '用户B', comment: '环境不错！' }
          ]
        },
        {
          id: 2,
          name: '餐厅B',
          address: '地址B',
          image: '2.jpg',
          rating: 4.0,
          dishes: [
            { name: '菜品3', price: 70, image: '8.jpg' },
            { name: '菜品4', price: 80, image: '9.jpg' }
          ],
          reviews: [
            { id: 1, user: '用户C', comment: '服务态度好！' },
            { id: 2, user: '用户D', comment: '味道一般！' }
          ]
        },
        {
          id: 3,
          name: '餐厅C',
          address: '地址C',
          image: '3.jpg',
          rating: 3.5,
          dishes: [
            { name: '菜品5', price: 90, image: '4.jpg' },
            { name: '菜品6', price: 100, image: '5.jpg' }
          ],
          reviews: [
            { id: 1, user: '用户E', comment: '性价比高！' },
            { id: 2, user: '用户F', comment: '值得一试！' }
          ]
        }
      ];
      this.restaurant = restaurants.find(r => r.id === parseInt(this.id)) || {};
    }, 500);
  }
};
</script>

<style scoped>
h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

.restaurant-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px; /* 减少图片和地址之间的间距 */
}

p {
  margin: 5px 0; /* 减少段落之间的间距 */
}

.dishes-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.dish-item {
  margin-bottom: 15px; /* 减少菜品项之间的间距 */
}

.dish-container {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd; /* 添加边框 */
  border-radius: 8px; /* 圆角 */
  background-color: #f9f9f9; /* 背景颜色 */
}

.dish-image {
  flex: 0 0 150px; /* 设置图片区域的固定宽度 */
  margin-right: 20px;
}

.dish-image-img {
  width: 100%; /* 图片适应其父级容器的宽度 */
  height: auto;
  border: 1px solid #ddd; /* 添加边框，使图片更清晰 */
  padding: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.dish-details {
  flex-grow: 1; /* 让细节区域自动扩展以填满剩余的空间 */
}

.dish-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.dish-price {
  color: #888;
  margin-left: 10px; /* 价格和菜品名称之间的间距 */
}

.rating-section {
  display: flex;
  align-items: center;
}

.inline-rate {
  margin-left: 5px; /* 星星和文字之间的间距 */
}

.compact-divider {
  margin: 5px 0; /* 减少分割线的上下间距 */
}

.compact-collapse {
  margin-top: 5px; /* 减少评论区和评分之间的间距 */
}

.compact-collapse-item {
  margin-bottom: 10px; /* 减少评论项之间的间距 */
}

.el-collapse-item__header {
  font-weight: bold;
  padding: 8px 16px; /* 减少标题的内边距 */
}

.el-collapse-item__content {
  padding-left: 10px;
  padding-bottom: 8px; /* 减少内容的底部内边距 */
}
</style>